<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <style>
    body {
      background-color: DarkGray;
    }
    select {
      width: 400px;
    }
    input, select, a { font: 32px Helvetica, Arial;}
    a {
      text-decoration: none;
      color: gray;
      margin: 20px;
    }
    #msg { height: 20px; padding: 10px;margin: 20px;}
    #query {
      font: 25px Helvetica, Arial; 
      margin: 15px;
    }
    #bottom {
      position: absolute;
      bottom: 5px;
      right: 0;
    }
    </style>
  </head>
  <body>
    <select id="list_select">
      <option selected id="initial_select">Please Select List</option>
    </select>
    <span id="sub"></span>
    <div id="msg" style="background-color: green;display: none">Correct! This is an awesome sample message.</div>
    <div id="query" style="display: none">Yo wazaah u doings on teh mail?</div>
    <input type="text" id="input" style="display: none">

    <div id="bottom"><a href="#" onclick="return false">Tips</a></div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="http://wikify.googlecode.com/svn-history/r63/trunk/v2/js/jquery.color.js"></script>
    <script>
      var pretty_names = {
        "words.txt": "Words",
        "parts.txt": "Parts"
      }
      function msg(content, color){
        $("#msg").fadeOut("slow");
        if(content){
          $("#msg").text(content);
          $("#msg").css("background-color", color);
          $("#msg").fadeIn("slow");
        }
      }
      
      function hide_box(){
        msg();
        $("#query, #input").fadeOut("slow");
      }
      
      function show_box(){
        $("#input").val("");
        $("#query, #input").fadeIn("slow");
      }
      
      
      function create_sub(list){
        $("#sub")
        .fadeOut("slow")
        .queue(function(){
          $(this).css("display","none");
          $(this).html("")
          $.each(list, function(index, item){
            index=pretty_names[index]?pretty_names[index]:index;
            $(document.createElement("a"))
              .text(index)
              .attr("href","#")
              .css("color", "#888")
              .click(function(e){
                e.preventDefault();
                $("a").animate({color: "#888"})
                $(this).animate({color: "black"})
                hide_box();
                show_box();
            })
            .appendTo("#sub")
          })
          $("#sub")
            .children()
            .filter(":eq(0)")
            .click()
          
          $(this).dequeue()
        })
        .fadeIn('slow')
      }
      
      
      $(document).ready(function(){
        $("#initial_select").attr("disabled","true")
        $("#list_select").change(function(e){
          hide_box();
          create_sub(lists[$("#list_select :selected").val()])
        })
      })
      $(document).ready(function(){
        $.each(lists, function(index, item){
          $(document.createElement("option"))
            .attr("id","whatever"+index)
            .val(index)
            .text("Word List #"+index)
            .appendTo("#list_select")
        })
      })
      
      var text = ":1\n\
1:parts.txt\n\
1:words.txt\n\
:2\n\
2:parts.txt\n\
2:words.txt\n\
:3\n\
3:parts.txt\n\
3:words.txt"

var lists = {};

$.each(text.split("\n"), function(index, item){
  var parts = item.split(":");
  if(parts[0] == ""){
    lists[parts[1]] = {}
  }else if(lists[parts[0]]){
    lists[parts[0]][parts[1]] = "";
  }
})

    </script>
  </body>
</html>
